<template>
  <div class="simpleSinger">
    <div v-for="item in singerList" :key="item.id" class="singerItem">
      <div @click="goSingerInfo(item.id)">
        <img :src="item.picUrl" alt="肖像" />
      </div>
      <span @click="goSingerInfo(item.id)">{{ item.name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import axios from "@/http";
import { useRoute, useRouter } from "vue-router";
const singerList = ref([]);
onMounted(() => {
  getSingerList();
});
const router = useRouter();
const route = useRoute();
const goSingerInfo = (id) => {
  router.push("/home/singerInfo/" + id);
};
const getSingerList = () => {
  const { id } = route.params;
  axios
    .get("/simi/artist", {
      params: { id },
    })
    .then((res) => {
      console.log(res);
      singerList.value = res.data.artists;
    });
};
</script>

<style scoped lang="scss">
.simpleSinger {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .singerItem {
    flex-basis: 157px;
    color: #b2b2b2;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: bold;
    img {
      width: 100%;
      height: 160px;
      border-radius: 5px;
      &:hover {
        cursor: pointer;
      }
    }
    span {
      &:hover {
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
</style>
